import "./Item.css"
/*
* 引入PubSub
* */
import PubSub from "pubsub-js"
/*
* 从props中解构出父组件传递过来的todo对象
* */
const Item = ({todo}) => {
    /*
    * 点击删除按钮的回调函数
    * */
    const handleDelete = (id) => {
        // publish 发布消息 消息名为：deleteTodo 内容为：id
        PubSub.publish("deleteTodo", todo.id)
    }

    /*
    *
    * 点击复选框的回调函数
    * */
    const changeChecked = () => {
        // publish 发布消息 消息名为：changeChecked 内容为：id
        PubSub.publish("changeChecked", {id: todo.id, checked: todo.checked})
    }
    return (
        <div className="Item">
            <div className="checked"><input type="checkbox" checked={todo.checked} onChange={changeChecked}/></div>
            <div className="text">{todo.text}</div>
            <button type="button" className="layui-btn layui-bg-red layui-btn-sm" onClick={() => handleDelete(todo.id)}>删除</button>
        </div>
    )
}

export default Item;
